<template>
  <div class="json-body-wrap">
    <div class="radio-group">
      <a-radio-group v-model:value="radioValue">
        <a-radio :value="1">none</a-radio>
        <a-radio :value="2">form-data</a-radio>
        <a-radio :value="3">x-www-form-urlencoded</a-radio>
        <a-radio :value="4">json</a-radio>
        <a-radio :value="5">xml</a-radio>
        <a-radio :value="6">row</a-radio>
        <a-radio :value="7">binary</a-radio>
      </a-radio-group>
    </div>
    <div v-if="inputData.length > 0" class="json-radio-group">
      <a-radio-group v-model:value="showInputJsonRadio" button-style="solid">
        <a-radio-button value="a">数据结构</a-radio-button>
        <a-radio-button value="b">json 预览</a-radio-button>
      </a-radio-group>
    </div>
    <a-table
        v-if="inputData.length > 0"
        v-show="showInputJsonRadio === 'a'"
        :pagination="false"
        expandRowByClick
        :columns="inputColumns"
        :data-source="inputData"
        :rowKey="(row) => row.id"
        :expanded-row-keys.sync="expandedInputRowKeys"
    >
      <template slot="fieldName" slot-scope="text, record">
        {{ record.fieldName }}
        <copy-outlined @click="handleCopy(record)" style="color: #108ee9"/>
      </template>
      <template slot="required" slot-scope="text, record">
        <a-tag :color="record.required === 1 ? '#f50' : '#108ee9'">{{
            record.required === 1 ? '是' : '否'
          }}
        </a-tag>
      </template>
      <template slot="comment" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'fieldComment', $event)"/>
      </template>
    </a-table>
    <div  v-if="inputData.length > 0" v-show="showInputJsonRadio === 'b'" class="json-panel">
      <vue-json-editor v-model="inputJsonObj" :showBtns="false" :mode="'code'"/>
    </div>
    <a-alert style="margin-top: 20px" message="响应示例" type="info"/>
    <div class="json-radio-group">
      <a-radio-group style="margin-top: 20px" v-model:value="showOutputJsonRadio" button-style="solid">
        <a-radio-button value="a">数据结构</a-radio-button>
        <a-radio-button value="b">json 预览</a-radio-button>
      </a-radio-group>
    </div>
    <a-table
        style="margin-top: 20px"
        v-show="showOutputJsonRadio === 'a'"
        :pagination="false"
        expandRowByClick
        :columns="outputColumns"
        :data-source="outputData"
        :rowKey="(row) => row.id"
        :expanded-row-keys.sync="expandedOutputRowKeys"
    >
      <template slot="fieldName" slot-scope="text, record">
        {{ record.fieldName }}
        <copy-outlined @click="handleCopy(record)" style="color: #108ee9;"/>
      </template>
      <template slot="comment" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'fieldComment', $event)"/>
      </template>
    </a-table>
    <div v-show="showOutputJsonRadio === 'b'" class="json-output">
      <vue-json-editor v-model="outputJsonObj" :showBtns="false" :mode="'code'"/>
    </div>
  </div>
</template>

<script>

import vueJsonEditor from 'vue-json-editor'
import {copy} from "@/utils";
import {
  CloseCircleOutlined,
  CheckCircleOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from "@ant-design/icons-vue";
import EditableCell from "@/components/EditableCell.vue";
import {eventBus} from "@/main";

export default {
  components: {
    EditableCell,
    vueJsonEditor,
    CloseCircleOutlined,
    CheckCircleOutlined,
    PlusOutlined,
    EditOutlined,
    DeleteOutlined
  },
  data() {
    return {
      inputColumns: [
        {
          align: 'left',
          title: '属性',
          dataIndex: 'fieldName',
          key: 'fieldName',
          width: '160px',
          scopedSlots: {customRender: 'fieldName'}
        },
        {
          align: 'center',
          title: '是否必输',
          dataIndex: 'required',
          key: 'required',
          width: '100px',
          scopedSlots: {customRender: 'required'}
        },
        {
          align: 'center',
          title: '备注',
          dataIndex: 'fieldComment',
          width: '50%',
          key: 'fieldComment',
          scopedSlots: {customRender: 'comment'}
        },
      ],
      outputColumns: [
        {
          align: 'left',
          title: '属性',
          dataIndex: 'fieldName',
          key: 'fieldName',
          width: '160px',
          scopedSlots: {customRender: 'fieldName'}
        },
        {
          align: 'center',
          title: '备注',
          dataIndex: 'fieldComment',
          width: '50%',
          key: 'fieldComment',
          scopedSlots: {customRender: 'comment'}
        },
      ],
      sendMethodColor: {
        'GET': '#2db7f5',
        'POST': '#108ee9',
        'PUT': '#87d068',
        'DELETE': '#f50',
      },
      tmpArr: [],
      showInputJsonRadio: 'a',
      showOutputJsonRadio: 'a',
      radioValue: 4,
      inputData: [],
      outputData: [],
      tempDocData: [],
      idLabelList: [],
      inputJsonObj: [],
      outputJsonObj: [],
      expandedInputRowKeys: [],
      expandedOutputRowKeys: [],
      docData: [],
      openKeys: ['sub1'],
      selectedKeys: [],
      keyword: '',
      sendMethodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
      sendMethod: 'POST',
      panes: [],
      topTabActiveKey: '',
      activeKey: '2',
      newTabIndex: 0,
      curRequest: null,
      treeData: [],
      expandedData: [],
      newFlag: 'edit',
      editFlag: false,
      newItem: '',
      uploadFile: null,
      fileList: [],
      namespaceId: '',
      treeId: '',
    }
  },
  mounted() {
    eventBus.$on('getRequestInfo', (retData) => {
      // 更新数据
      this.handleUpdateLoadData(retData)
    })
  },
  methods: {
    copy,
    // 监听复制
    handleCopy(row) {
      console.log(row.fieldName)
      copy(row.fieldName)
    },
    // 监听行编辑
    onCellChange(key, dataIndex, value) {
      console.log(key, dataIndex, value)
    },
    // 更新数据
    handleUpdateLoadData(retData) {
      this.inputData = JSON.parse(JSON.stringify(retData.inputParamList))
      this.outputData = JSON.parse(JSON.stringify(retData.outputParamList))
      let inputArr = JSON.parse(JSON.stringify(retData.inputArrayParamList))
      let outputArr = JSON.parse(JSON.stringify(retData.outputArrayParamList))
      // 输入数据结构
      Object.keys(inputArr).some(key => {
        let itemArr = inputArr[key]
        Object.keys(itemArr).some(k => {
          // 临时记录数组
          this.tmpArr.push({key: k, value: itemArr[k]})
          let find = this.idLabelList.find(item => item.id === k)
          this.inputData.unshift({fieldName: k, fieldComment: !!find ? find.label : '', children: itemArr[k]})
        })
      })
      // 输出数据结构
      Object.keys(outputArr).some(key => {
        let itemArr = outputArr[key]
        Object.keys(itemArr).some(k => {
          // 临时记录数组
          this.tmpArr.push({key: k, value: itemArr[k]})
          let find = this.idLabelList.find(item => item.id === k)
          this.outputData.unshift({fieldName: k, fieldComment: !!find ? find.label : '', children: itemArr[k]})
        })
      })
      // 输入 json 预览
      this.inputJsonObj = {}
      for (const item of this.inputData) {
        this.inputJsonObj[item.fieldName] = ''
      }
      Object.keys(this.inputJsonObj).some(k => {
        let find = this.tmpArr.find(item => item.key === k);
        if (!!find) {
          let fields = find.value.map(f => f.fieldName)
          let obj = {}
          for (const field of fields) {
            obj[field] = ''
          }
          this.inputJsonObj[k] = [obj]
        }
      })
      // 输出 json 预览
      let outputObj = {}
      let paramList = JSON.parse(JSON.stringify(retData.outputParamList))
      for (const param of paramList) {
        outputObj[param.fieldName] = ''
      }
      let outputArrayParamList = JSON.parse(JSON.stringify(retData.outputArrayParamList))
      for (const outputArrayItem of outputArrayParamList) {
        Object.keys(outputArrayItem).some(k => {
          let tempList = outputArrayItem[k].map(item => item.fieldName)
          let tempObj = {}
          for (const t of tempList) {
            tempObj[t] = ''
          }
          outputObj[k] = [tempObj]
        })
      }
      this.outputJsonObj = outputObj
    },
  },
  watch: {
    keyword(val) {
      if (val) {
        let arr = JSON.parse(JSON.stringify(this.tempDocData))
        this.docData = arr.filter(item => item.name.includes(val))
        console.log(this.docData)
      } else {
        this.docData = this.tempDocData
      }
    }
  },
}

</script>

<style lang="less" scoped>

::v-deep .ant-modal-close-x {
  color: white;
}

::v-deep .ant-modal-title {
  color: white;
}

::v-deep .anticon svg {
  cursor: default;
}

::v-deep .ant-table table {
  cursor: pointer;
}

::v-deep .ant-modal-header {
  background: #50a2f8;
  border-radius: 16px 16px 0 0;
  padding: 12px 24px;
}

::v-deep .ant-modal-content {
  border-radius: 16px;
}

::v-deep .ivu-upload-drag {
  height: 100%;
}

.doc-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 20px);

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 255px;
    height: 100%;

    .search {
      display: flex;

      .upload-btn {
        margin-top: 10px;
        font-size: 16px;
      }
    }

    .tree {
      width: 100%;
    }

    .side-menu {
      overflow-y: scroll;
      height: calc(100vh - 60px);
    }

    .side-menu::-webkit-scrollbar {
      width: 0;
    }

  }

  .right {
    width: calc(100vw - 255px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-content {
      width: 100%;
      height: 540px;
      overflow-y: scroll;

      .tab {
        width: 96%;
        height: 50px;
      }

      .send-method {
        width: 96%;
        height: 80px;

        .sendName {
          margin-top: 8px;
        }
      }

      .param-tab {
        width: 96%;
        height: 60px;

        .json-body-wrap {
          width: 100%;

          .radio-group {
            width: 100%;
            height: 40px;
          }

          .json-radio-group {
            margin: auto;
            width: max-content;
            height: 50px;
          }

          .json-panel {
            width: 100%;
            height: 300px;
          }

          .json-output {
            margin-top: 20px;
          }

        }

      }

    }

  }

  //.right::-webkit-scrollbar {
  //  width: 0;
  //}

  ::v-deep .jsoneditor-vue {
    height: 300px;
  }

  ::v-deep .jsoneditor-poweredBy {
    display: none;
  }

}


.editInput {
  width: 120px;
  margin-left: -4px;
}

.tree-custom-item-edit-input {
  height: 32px;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: none;
}

.icon-wrap {
  margin-left: 5px;
  color: #1890ff;
}

.namespace {
  width: 100%;
  height: 36px;
}

</style>